<template>
  <div id="VIP_index" class="all">
    <div id="employee_index">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理 </el-breadcrumb-item>
        <el-breadcrumb-item>商品信息</el-breadcrumb-item>
      </el-breadcrumb>

      <br />

      <div class="table-container">
        <span style="margin-right: 85%; padding: 10px"><b>查询商品 / 添加商品</b></span>
        <el-divider class="custom-divider"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-input v-model="searchForm.commodityId" style="width: 95%; padding: 8px" placeholder="商品编号" />
          </el-col>
          <el-col :span="6">
            <el-input v-model="searchForm.goodName" style="width: 95%; padding: 8px" placeholder="商品名称" />
          </el-col>
          <el-col :span="6">
            <el-select v-model="searchForm.categoryId" style="width: 95%; padding: 8px;" placeholder="请选择商品类别">
              <el-option v-for="item in typeoptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" style="text-align: center; padding: 8px 20px">
            <el-button type="primary" style="font-size: 16px" @click="searchMessage();" icon="el-icon-search">
              搜索</el-button>
            <el-button type="success" style="font-size: 16px" @click="openInputMessage">添加商品</el-button>

            <el-dialog title="新增商品信息" :visible.sync="inputMessage">
              <el-form :model="inputform">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="inputform.goodName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品单价" :label-width="formLabelWidth">
                  <el-input v-model="inputform.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品简介" :label-width="formLabelWidth">
                  <el-input v-model="inputform.intro" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存量" :label-width="formLabelWidth">
                  <el-input v-model="inputform.inventory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品类别" :label-width="formLabelWidth">
                  <el-select v-model="inputform.categoryId" style="width: 100%" placeholder="请选择">
                    <el-option v-for="item in addoptions" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeInputMessage(); canceladd()">取 消</el-button>
                <el-button type="primary" @click="submitInputMessage(); addopen()">确 定</el-button>
              </div>
            </el-dialog>

            <el-dialog title="更新商品信息" :visible.sync="updateMessage" @close="closeUpdateMessage"
              :close-on-click-modal="false">
              <el-form :model="updateform" ref="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="updateform.goodName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品单价" :label-width="formLabelWidth">
                  <el-input v-model="updateform.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品简介" :label-width="formLabelWidth">
                  <el-input v-model="updateform.intro" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存量" :label-width="formLabelWidth">
                  <el-input v-model="updateform.inventory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品类别" :label-width="formLabelWidth">
                  <el-select v-model="updateform.categoryId" style="width: 100%" placeholder="请选择">
                    <el-option v-for="item in addoptions" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeUpdateMessage">取 消</el-button>
                <el-button type="primary" @click="closeUpdateMessage(); updateopen(); submitUpdateMessage();">确
                  定</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </div>

      <br />

      <!--表格数据-->
      <div class="table-container">
        <span style="margin-right: 92%; padding: 10px"><b>商品信息</b></span>
        <el-divider class="custom-divider"></el-divider>
        <el-table :data="tableDate" style="width: 100%" size="medium">
          <el-table-column prop="commodityId" width="130" label="商品编号"></el-table-column>
          <el-table-column width="130" prop="goodName" label="商品名称"></el-table-column>
          <el-table-column width="130" prop="price" label="商品单价"></el-table-column>
          <el-table-column width="130" prop="intro" label="简介"></el-table-column>
          <el-table-column width="130" prop="inventory" label="库存量"></el-table-column>
          <el-table-column width="130" prop="categoryId" label="类别">
            <template slot-scope="scope">
              {{ getCategoryIdText(scope.row.categoryId) }}
            </template>
          </el-table-column>
          <el-table-column width="130" prop="isvipCommodity" label="是否积分商品">
            <template slot-scope="scope">
              {{ getIsVIPCommodityText(scope.row.isvipCommodity) }}
            </template>
          </el-table-column>
          <el-table-column width="130" prop="vipScore" label="兑换所需积分"></el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template v-slot="scope">
              <el-button style="font-size: 16px" type="success" @click="openUpdateMessage(scope.row)">修改</el-button>
              <el-button style="font-size: 16px" type="danger" @click="deleteopen(scope.row)"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
          background layout="total, prev, pager, next, jumper" :total="3" :page-size="5">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
<script>
import axios from 'axios';

export default {
  data() {
    return {
      empId: "",
      cusId: "",
      username: "",
      password: "",
      searchForm: {
        commodityId: "",
        goodName: "",
        categoryId: "",
      },

      inputform: {
        commodityId: "",
        goodName: "",
        price: "",
        intro: "",
        inventory: "",
        categoryId: "",
      },

      updateform: {
        commodityId: "",
        goodName: "",
        price: "",
        intro: "",
        inventory: "",
        categoryId: "",
      },

      deleteform: {
        commodityId: "",
      },
      checkid() {
        if (this.empId == "" || this.empId == null)
          this.$router.push('/login');
      },

      tableDate: [
        {
          commodityId: "1",
          goodName: "保温杯",
          price: "99",
          intro: "暖暖的很贴心",
          inventory: "50",
          categoryId: "2",
          isvipCommodity: "0",
          vipScore: "300"
        }
      ],

      inputMessage: false,
      updateMessage: false,

      typeoptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "服装",
        },
        {
          value: "2",
          label: "食物",
        },
        {
          value: "3",
          label: "生活用品",
        },
        {
          value: "4",
          label: "娱乐用品",
        },
        {
          value: "5",
          label: "学习用品",
        },
      ],
      addoptions: [
        {
          value: "1",
          label: "服装",
        },
        {
          value: "2",
          label: "食物",
        },
        {
          value: "3",
          label: "生活用品",
        },
        {
          value: "4",
          label: "娱乐用品",
        },
        {
          value: "5",
          label: "学习用品",
        },
      ],

      VIPoptions: [
        {
          value: "0",
          label: "否"
        },
        {
          value: "1",
          label: "是"
        }
      ],
      value: "",
      formLabelWidth: "80px",

    };

  },

  methods: {
    searchMessage() {
      // 发送搜索的请求
      this.handleSearch();
    },

    // 取消添加
    canceladd() {
      this.$message("您已取消添加");
    },

    //成功添加一个员工
    addopen() {
      this.$message({
        message: "恭喜你，添加成功！",
        type: "success",
      });
    },

    init() {
      this.empId = localStorage.getItem('empId');
      this.cusId = localStorage.getItem('cusId');
      this.username = localStorage.getItem('username') || "";
      this.password = localStorage.getItem('password') || "";
    },

    // 删除一行记录时弹出提醒框。
    deleteopen(row) {
      this.deleteform.commodityId = row.commodityId;

      this.$confirm("此操作将删除该条销售记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 发送删除的请求
          this.handleDelete();
          this.selDate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 将类别那一栏的0，1，2，3，4显示为服装，食物，生活用品，娱乐用品，学习用品
    getCategoryIdText(categoryId) {
      const categoryIdMap = {
        1: "服装",
        2: "食物",
        3: "生活用品",
        4: "娱乐用品",
        5: "学习用品",
      };
      return categoryIdMap[categoryId];
    },
    // 将类别那一栏的0，1显示为否，是
    getIsVIPCommodityText(isVIPCommodity) {
      const isVIPCommodityMap = {
        0: "否",
        1: "是",
      };

      return isVIPCommodityMap[isVIPCommodity]
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    openInputMessage() {
      this.inputMessage = true;
    },
    closeInputMessage() {
      this.inputMessage = false;
    },
    submitInputMessage() {
      // 发送添加的请求
      this.handleInput();
      // 处理表单提交逻辑
      console.log("提交表单：", this.form);
      // 关闭对话框
      this.searchMessage();
      this.closeInputMessage();
    },

    //打开修改对话框
    openUpdateMessage(row) {
      this.updateform.commodityId = row.commodityId;
      this.updateform.goodName = row.goodName;
      this.updateform.price = row.price;
      this.updateform.intro = row.intro;
      this.updateform.inventory = row.inventory;
      this.updateform.categoryId = this.getCategoryIdText(row.categoryId);
      this.updateMessage = true;
    },
    //关闭修改对话框
    closeUpdateMessage() {
      this.updateMessage = false;
    },
    submitUpdateMessage() {
      // 发送修改的请求
      this.handleUpdate();
      this.searchMessage();
    },
    //成功修改
    updateopen() {
      this.$message({
        message: "恭喜你，修改成功！",
        type: "success",
      });
    },

    // 切换到当前页面查询整个列表的请求
    getMainData() {
      const url = "http://localhost:8080/goods";
      // 使用axios发送GET请求
      axios.get(url).then((response) => {
        // 请求成功处理
        console.log(response.data);

        // 将获取的数据赋值给你的数据属性，比如this.test
        this.tableDate = response.data.data.rows;
      }).catch((error) => {
        // 请求失败处理
        console.error('Error in API request', error);
      });
    },

    // 发送搜索请求
    searchDate() {
      const url = "http://localhost:8080/goods";
      // 使用axios发送GET请求，并将searchForm中的信息作为参数传递
      axios.get(url, {
        params: this.searchForm
      }).then((response) => {
        // 请求成功处理
        console.log(response.data);
        // 将获取的数据赋值给你的数据属性，比如this.test
        this.tableDate = response.data.data.rows;
      }).catch((error) => {
        // 请求失败处理
        console.error('Error in API request', error);
      });
    },

    // 发送新增请求
    inputDate() {
      const url = "http://localhost:8080/goods";
      // 使用axios发送POST请求，并将addform中的信息作为参数传递
      axios.post(url, this.inputform).then((response) => {
        // 请求成功处理
        console.log(response.data);
        this.selDate();
        // 将获取的数据赋值给你的数据属性，比如this.test
        //  this.test = response.data.data.rows;
      }).catch((error) => {
        // 请求失败处理
        console.error('Error in API request', error);
      });
    },

    // 发送修改请求
    updateDate() {
      const url = "http://localhost:8080/goods";
      alert(JSON.stringify(this.updateform))
      // 使用axios发送PUT请求，并将updateform中的信息作为参数传递
      axios.put(url, this.updateform).then((response) => {
        // 请求成功处理
        console.log(response.data);
        this.selDate();
        // 将获取的数据赋值给你的数据属性，比如this.test
        //  this.test = response.data.data;
      }).catch((error) => {
        // 请求失败处理
        console.error('Error in API request', error);
      });
    },

    // 发送删除请求
    deleteDate() {
      let url = "http://localhost:8080/goods";
      url += this.deleteform.commodityId;
      // 使用axios发送DELETE请求，并将deleteform中的信息作为参数传递
      axios.delete(url).then((response) => {
        // 请求成功处理
        console.log(response.data);
        this.selDate();
        // 将获取的数据赋值给你的数据属性，比如this.test
        //  this.test = response.data.data;
      }).catch((error) => {
        // 请求失败处理
        console.error('Error in API request', error);
      });
    },

    handleSearch() {
      this.searchDate();
    },

    handleInput() {
      this.inputDate();
    },

    handleUpdate() {
      this.updateDate();
    },

    handleDelete() {
      this.deleteDate();
    }

  },

  mounted() {
    this.init();
    this.checkid();
    this.getMainData();
  },
};
</script>
  
<style>
.router-link-active {
  text-decoration: none;
}

.table-container {
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
}

.custom-divider {
  margin: 4px 0;
  /* 调整 el-divider 的间距 */
}

.custom-descriptions {
  padding-left: 10px;
  margin-bottom: 0;
}

.all {
  line-height: 30px;
}
</style>